<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="后台 | 后台管理系统 |joney"/>
    <meta name="author" content="joney"/>
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/black/easyui.css}" id="swicth-style"/>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.8.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/locale/easyui-lang-zh_CN.js}"></script>
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" th:src="@{/js/easyui-validate.js}"></script>

</head>
<body>
<div id="searchBar" style="padding:5px;height:auto">
    <div>
        名称: <input class="easyui-textbox" id="name_sch"/>
        状态:
        <select class="easyui-combobox" id="state_sch" panelHeight="auto" style="width:80px">
            <option value="" selected="selected">全部</option>
            <option value="0">禁用</option>
            <option value="1">启用</option>
        </select>
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="searchForm();">查询</a>
    </div>
</div>

<table id="listTb" title="角色列表" style="width:100%;height:500px"
       data-options="rownumbers:true,singleSelect:true,pagination:true,url:'/role/list',method:'get',toolbar:'#searchBar'">
    <thead>
    <tr>
        <th data-options="field:'id',width:70,align:'center'">ID</th>
        <th data-options="field:'name',width:200">名称</th>
        <th data-options="field:'description',width:300">描述</th>
        <th data-options="field:'state',width:60,align:'center'" formatter="formatState">状态</th>
        <th data-options="field:'createTime',width:140,align:'center'" formatter="formatTime">创建时间</th>
        <th data-options="field:'createUser',width:70,align:'center'">创建人ID</th>
        <th data-options="field:'updateTime',width:140,align:'center'" formatter="formatTime">更新时间</th>
        <th data-options="field:'updateUser',width:70,align:'center'">更新人ID</th>
    </tr>
    </thead>
</table>

<div id="addDlg" class="easyui-dialog" title="新增" style="width:400px;height:200px;padding:10px"
     data-options="modal:true,closed:true,
                cache: false,
				iconCls: 'icon-save',
				buttons: [{
					text:'保存',
					iconCls:'icon-ok',
					handler:function(){
						saveForm();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#addDlg').dialog('close');
					}
				}]
			">
    <div th:include="sys_base/role_add :: addFrag"></div>
</div>

<script th:inline="javascript">
/*<![CDATA[*/
    var canAdd = /*[[${authMap.canAdd}]]*/ false;
    var canEdit = /*[[${authMap.canEdit}]]*/ false;
    var canDel = /*[[${authMap.canDel}]]*/ false;
    var canUserOpt = /*[[${authMap.canUserOpt}]]*/ false;
    var canResOpt = /*[[${authMap.canResOpt}]]*/ false;
    var canRoleBindResOpt = /*[[${authMap.canRoleBindResOpt}]]*/ false;

    $(function(){
        var buttons = [];
        if(canAdd){
            buttons.push({text:'新增',iconCls:'icon-add',
                handler:function(){
                    $('#addDlg').dialog('open');
                }
            });
            buttons.push('-');
        }
        if(canEdit){
            buttons.push({text:'编辑',iconCls:'icon-edit',
                handler:function(){
                    var row = $('#listTb').datagrid('getSelected');
                    if (row){
                        editForm(row.id);
                    }else{
                        showMsg('请选择一条记录');
                    }
                }
            });
            buttons.push('-');
        }
        if(canDel){
            buttons.push({text:'删除',iconCls:'icon-remove',
                handler:function(){
                    var row = $('#listTb').datagrid('getSelected');
                    if (row){
                        $.messager.confirm({
                            width: 250,
                            title: '提示',
                            msg: '确认要删除以下角色吗?\<br\/\>\<span style=\"color: blue\"\>【'+row.name+'】\<\/span\>',
                            ok: "是",
                            cancel: "否",
                            fn: function (r) {
                                if (r){
                                    removeRecord(row.id);
                                }
                            }
                        });
                    }else{
                        //$.messager.alert('提示', '请选择一条记录', 'info');
                        showMsg('请选择一条记录');
                    }

                }
            });
            buttons.push('-');
        }
        if(canUserOpt){
            buttons.push({text:'查看用户',iconCls:'icon-group-link',
                handler:function(){
                    var row = $('#listTb').datagrid('getSelected');
                    if (row){
                        bindUser(row.id,row.name);
                    }else{
                        //$.messager.alert('提示', '请选择一条记录', 'info');
                        showMsg('请选择一条记录');
                    }

                }
            });
            buttons.push('-');
        }

        if(canResOpt){
            buttons.push({text:'查看权限',iconCls:'icon-group-key',
                handler:function(){
                    var row = $('#listTb').datagrid('getSelected');
                    if (row){
                        bindRes(row.id,row.name);
                    }else{
                        //$.messager.alert('提示', '请选择一条记录', 'info');
                        showMsg('请选择一条记录');
                    }

                }
            });
            buttons.push('-');
        }



        var pager = $('#listTb').datagrid().datagrid('getPager');	// get the pager of datagrid
        pager.pagination({
            buttons: buttons
        });
    })

    //0:禁用 1:启用
    function formatState(val,row){
        if(val == 0){
            return "禁用";
        }else{
            return "启用"
        }

    }
    //格式化时间
    function formatTime(val) {
        return timeStamp2String(val);
    }
    //格式化操作按钮
    //function formatOpt(val,row,index){
    //    var params = "'"+row.id +"','"+row.name+"'";
     //   return "<a href=\"javascript:bindUser("+params+")\">用户</a> &nbsp;&nbsp; <a href='javascript:bindRes("+row.id+")'>资源</a>";
    //}
    //查看绑定用户
    function bindUser(id,name){
        var url = '/role/mgr?kind=user&roleId='+id;
        $('<div></div>').dialog({
            id : 'editDlg2',
            title : '角色与用户关系管理 当前角色:\<span style=\"color: green\"\>【'+name+'】\<\/span\>',
            width : 600,
            height : 420,
            closed : false,
            cache : false,
            href : url,
            modal : true,
            onClose : function() {
                $(this).dialog('destroy');
            },
            buttons : [{
                text : '关闭',
                iconCls : 'icon-cancel',
                handler : function() {
                    $("#editDlg2").dialog('destroy');
                }
            } ]
        });
    }
    //查看绑定资源
    function bindRes(id,name){
        var url = '/role/mgr?kind=res&roleId='+id;
        var buttons=[];
        if(canRoleBindResOpt){
            buttons.push({
                text : '保存',
                iconCls : 'icon-save',
                handler : function() {
                    saveTree();
                }
            })
        }
        buttons.push({
            text : '关闭',
            iconCls : 'icon-cancel',
            handler : function() {
                $("#editDlg3").dialog('destroy');
            }
        });

        $('<div></div>').dialog({
            id : 'editDlg3',
            title : '角色与资源关系管理 当前角色:\<span style=\"color: green\"\>【'+name+'】\<\/span\>',
            width : 500,
            height : 600,
            closed : false,
            cache : false,
            href : url,
            modal : true,
            onClose : function() {
                $(this).dialog('destroy');
            },
            buttons : buttons
        });
    }

    //保存表单
    function saveForm() {

        if($('#addForm').form('validate')){
            $.messager.progress();
            $.ajax({
                type:'POST',
                contentType: "application/json; charset=utf-8",
                url:"/role/insert",
                data:$('#addForm').serializeJSON(),
                cache:false,
                dataType:'json',
                success:function(data){
                    if(data.code!=0){
                        $.messager.alert('提示', data.msg, 'error');
                    }else{
                        showMsg('提交成功');
                        $('#addForm').form('reset');
                        $('#addDlg').dialog('close');
                        searchForm();
                    }
                },
                error:function(e) {
                    $.messager.alert('提示', '提交失败', 'error');

                },
                complete:function () {
                    $.messager.progress('close');
                }
            });
        }
    }

    //编辑表单
    function editForm(id){
        $('<div></div>').dialog({
            id : 'editDlg',
            title : '编辑',
            width : 400,
            height : 200,
            closed : false,
            cache : false,
            href : '/role/edit?id='+id,
            modal : true,
            onClose : function() {
                $(this).dialog('destroy');
            },
            buttons : [ {
                text : '保存',
                iconCls : 'icon-ok',
                handler : function() {
                    //提交表单
                    updateForm();
                }
            }, {
                text : '取消',
                iconCls : 'icon-cancel',
                handler : function() {
                    $("#editDlg").dialog('destroy');
                }
            } ]
        });
    }

    //更新表单
    function updateForm() {

        if($('#editForm').form('validate')){
            $.messager.progress();
            $.ajax({
                type:'POST',
                contentType: "application/json; charset=utf-8",
                url:"/role/update",
                data:$('#editForm').serializeJSON(),
                cache:false,
                dataType:'json',
                success:function(data){
                    if(data.code!=0){
                        $.messager.alert('提示', data.msg, 'error');
                    }else{
                        showMsg('提交成功');
                        $('#editForm').form('reset');
                        $('#editDlg').dialog('close');
                        searchForm();
                    }
                },
                error:function(e) {
                    $.messager.alert('提示', '提交失败', 'error');

                },
                complete:function () {
                    $.messager.progress('close');
                }
            });
        }
    }

    //删除记录
    function removeRecord(id) {
        $.messager.progress();
        $.ajax({
            type:'GET',
            contentType: "application/json; charset=utf-8",
            url:"/role/remove?id="+id,
            cache:false,
            dataType:'json',
            success:function(data){
                if(data.code!=0){
                    $.messager.alert('提示', data.msg, 'error');
                }else{
                    showMsg('删除成功');
                    searchForm();
                }
            },
            error:function(e) {
                $.messager.alert('提示', '删除失败', 'error');

            },
            complete:function () {
                $.messager.progress('close');
            }
        });
    }
    
    function searchForm() {
        $('#listTb').datagrid('reload',{
            name: $("#name_sch").val(),
            state: $("#state_sch").combobox('getValue')
        });
    }

/*]]>*/
</script>
</body>
</html>
